<template>
    <jb-crud-page
        ref="noticePage"
        title-icon="ant-design:sound-outlined"
        title-text="系统通知管理"
        search-url="/api/admin/sysNotice/datas"
        :search-conditions="pageConditions"
        :edit-component="Edit"
    >
        <template #conditions>
            <n-input
                v-model:value="pageConditions.keywords"
                type="text"
                placeholder="输入关键字搜索"
            />

            <jb-select
                v-model:value="pageConditions.type"
                url="/api/admin/dictionary/options?typeKey=sys_notice_type"
                filterable
                class="w-130px"
                placeholder="=类型="
            >
            </jb-select>
            <jb-select
                v-model:value="pageConditions.priorityLevel"
                url="/api/admin/dictionary/options?typeKey=sys_notice_priority_level"
                filterable
                class="w-130px"
                placeholder="=优先级="
            >
            </jb-select>
            <jb-select
                v-model:value="pageConditions.reciverType"
                url="/api/admin/dictionary/options?typeKey=sys_notice_receiver_type"
                filterable
                class="w-130px"
                placeholder="=接受者类型="
            >
            </jb-select>
            <jb-btn :icon="Icons.SEARCH" @click="search"> 查询 </jb-btn>
            <jb-btn
                :icon="Icons.DELETE"
                :ghost="pageConditions.isDeleted == 'false'"
                type="error"
                @click="recycleSearch"
            >
                回收站
            </jb-btn>
        </template>
        <template #opt>
            <n-button-group>
                <jb-btn
                    v-if="pageConditions.isDeleted == 'true'"
                    :icon="Icons.RESET"
                    confirm-text="确定还原选中数据？"
                    color="#8a2be2"
                    ghost
                    @confirm="getSelectEvent()"
                    >还原
                </jb-btn>
                <jb-btn
                    v-else
                    :icon="Icons.DELETE"
                    type="error"
                    ghost
                    confirm-text="确定删除选中数据？"
                    @confirm="getSelectEvent()"
                    >删除
                </jb-btn>

                <jb-btn
                    :icon="Icons.ADD"
                    type="primary"
                    ghost
                    @click="
                        $router.push({
                            name: PageNames.SYSNOTICE_PUBLISH
                        })
                    "
                >
                    新增
                </jb-btn>
                <jb-btn
                    :icon="Icons.REFRESH"
                    type="warning"
                    ghost
                    @click="noticePage?.loadData()"
                >
                    刷新
                </jb-btn>
            </n-button-group>
        </template>

        <template #default="{ state }">
            <vxe-table
                ref="tableRef"
                border
                :column-config="{ resizable: true }"
                height="auto"
                show-header-overflow
                show-overflow="tooltip"
                :seq-config="{ startIndex: state.tableStartIndex }"
                :checkbox-config="{ trigger: 'row' }"
                :row-config="{ isHover: true }"
                align="center"
                :data="state.list"
            >
                <jb-column type="checkbox" width="60" fixed="left"></jb-column>
                <jb-column type="seq" title="序号" width="60" fixed="left"></jb-column>
                <jb-column
                    field="title"
                    title="标题"
                    min-width="350"
                    fixed="left"
                ></jb-column>
                <jb-column field="files" title="附件" width="100">
                    <template #default="{ row }">
                        <div
                            class="flex justify-center cursor-pointer"
                            @click.stop="
                                noticePage?.showEditModal('系统通知附件列表管理', {
                                    id: row.id
                                })
                            "
                        >
                            <jb-icon
                                :class="{
                                    'text-primary': row.hasFile,
                                    'text-gray': !row.hasFile
                                }"
                                class="text-24px"
                                icon="mdi:file"
                            ></jb-icon>
                        </div>
                    </template>
                </jb-column>
                <jb-column field="typeName" title="类型" sortable width="100">
                    <template #default="{ row }">
                        <n-tag type="info">
                            {{ row?.typeName }}
                        </n-tag>
                    </template>
                </jb-column>
                <jb-column
                    field="priorityLevelName"
                    title="优先级"
                    sortable
                    min-width="100"
                >
                    <template #default="{ row }">
                        <n-tag
                            :type="
                                row.priorityLevel == 1
                                    ? 'default'
                                    : row.priorityLevel == 2
                                    ? 'info'
                                    : 'error'
                            "
                        >
                            {{ row?.priorityLevelName }}
                        </n-tag>
                    </template>
                </jb-column>
                <jb-column
                    field="readCount"
                    title="已读数"
                    sortable
                    width="100"
                ></jb-column>
                <jb-column
                    field="receiverTypeName"
                    title="接收者类型"
                    sortable
                    width="160"
                >
                    <template #default="{ row }">
                        <n-tag type="info">
                            {{ row?.receiverTypeName }}
                        </n-tag>
                    </template>
                </jb-column>
                <jb-column
                    field="receiverValues"
                    title="接收值"
                    min-width="200"
                ></jb-column>
                <jb-column
                    field="createTime"
                    title="创建时间"
                    sortable
                    min-width="200"
                ></jb-column>
                <jb-column
                    field="updateTime"
                    title="更新时间"
                    sortable
                    min-width="200"
                ></jb-column>
                <jb-column
                    field="createUserName"
                    title="创建人"
                    min-width="120"
                ></jb-column>
                <jb-column
                    field="updateUserName"
                    title="更新人"
                    min-width="120"
                ></jb-column>
                <jb-column title="操作" width="110" fixed="right">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="编辑"
                            :icon="Icons.EDIT"
                            secondary
                            type="warning"
                            circle
                            @click="
                                $router.push({
                                    name: PageNames.SYSNOTICE_PUBLISH,
                                    query: { id: row.id }
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            v-if="pageConditions.isDeleted == 'false'"
                            tip-text="删除"
                            :icon="Icons.DELETE"
                            secondary
                            type="error"
                            class="mx-8px"
                            circle
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/sysNotice/delete?ids=${row.id}`"
                            @success="noticePage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
            </vxe-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { onActivated, reactive, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { VxeTableInstance } from 'vxe-table'
import { Icons } from '@/constants'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import { JBoltApi } from '@/utils/request'
import { PageNames } from '@/router/routes/pagenames'
import Edit from './components/file-edit/index.vue'

const noticePage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = reactive({
    keywords: '',
    type: '',
    priorityLevel: '',
    reciverType: '',
    isDeleted: 'false'
})
function search() {
    pageConditions.isDeleted = 'false'
    if (noticePage.value) noticePage.value.loadData(true)
}
function recycleSearch() {
    pageConditions.isDeleted = 'true'
    if (noticePage.value) noticePage.value.loadData(true)
}
const tableRef = ref<VxeTableInstance<any>>()
function getSelectEvent() {
    const $table = tableRef.value
    if ($table) {
        const selectRecords = $table.getCheckboxRecords()
        let ids = selectRecords.map((obj) => obj.id).join(',')
        if (pageConditions.isDeleted == 'true') {
            JBoltApi.get(`/api/admin/sysNotice/restore?ids=${ids}`).then(() => {
                noticePage.value?.loadData()
            })
        } else {
            JBoltApi.get(`/api/admin/sysNotice/delete?ids=${ids}`).then(() => {
                noticePage.value?.loadData()
            })
        }
    }
}
const route = useRoute()
watch(
    () => route.query.reset,
    () => {
        if (noticePage.value) noticePage.value.loadData()
    }
)
onActivated(() => {
    if (noticePage.value) noticePage.value.loadData()
})
</script>

<style scoped></style>
